<template>
  <div class="screen overview page-content">
    <screen-header :title="'能耗系统大数据监测'"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6" class="ibox-group">
          <div class="ibox bg1 box1-1">
            <div class="ibox-header">
              <span class="ibox-title">能耗预测</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-1">
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Prediction.YearConsume" from="0"
                      :to="ConsumePrediction.Prediction.YearConsume" :duration="1000"
                      easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本年</p>
                </div>
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Prediction.MonthConsume" from="0"
                      :to="ConsumePrediction.Prediction.MonthConsume" :duration="1000"
                      easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本月</p>
                </div>
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Prediction.WeekConsume" from="0"
                      :to="ConsumePrediction.Prediction.WeekConsume" :duration="1000"
                      easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本周</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox box1-2">
            <div class="ibox-header">
              <span class="ibox-title">各区能耗监测</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-1">
                <ul class="list">
                  <li class="ibox" v-for="(item, index) in consumerRgion" :key="index">
                    <div class="val1" style="text-align: center;margin: 1.5vh auto 1.5vh;padding-left: 3vw;">
                      <animate-number v-if="item.consume" from="0" :to="item.consume" :duration="1000"
                        easing="easeOutQuad"></animate-number>
                      <span v-else>0</span>
                    </div>
                    <p class="name1" style="padding-left: 1vw; padding-bottom: 1vh;">{{ item.regionName }}</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="ibox-group">
          <div class="ibox bgh  box1-1">
            <div class="ibox-header">
              <span class="ibox-title">能耗监测</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-1">
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Current.YearConsume" from="0"
                      :to="ConsumePrediction.Current.YearConsume" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本年</p>
                </div>
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Current.MonthConsume" from="0"
                      :to="ConsumePrediction.Current.MonthConsume" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本月</p>
                </div>
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Current.WeekConsume" from="0"
                      :to="ConsumePrediction.Current.WeekConsume" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本周</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox bgh  box1-2">
            <div class="ibox-header">
              <span class="ibox-title">单位面积消耗</span>
            </div>
            <div class="ibox-body">
              <el-row :gutter="20">
                <el-col :span="12" class="ibox-group">

                  <div
                    style="background-color: #111581; margin-top: 1.5vh;margin-bottom: 3vh;font-size: 1.2vw;padding: 0.2vh 0.5vw;">
                    <span>楼栋总能耗：{{ area }}</span>
                    <span style="float: right;">单位：{{ unit }}</span>
                  </div>
                  <div class="box1-3">
                    <div class="chart" id="consume_chart2_1"></div>
                  </div>
                </el-col>
                <el-col :span="12" class="ibox-group">
                  <div class="box1-3" style="height: 34vh;">
                    <div class="chart" id="consume_chart2_2"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="ibox-group">
          <div class="ibox box1-1">
            <div class="ibox-header">
              <span class="ibox-title">能耗同比</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-1">
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Contrast.YearConsume" from="0"
                      :to="ConsumePrediction.Contrast.YearConsume" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本年</p>
                </div>
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Contrast.MonthConsume" from="0"
                      :to="ConsumePrediction.Contrast.MonthConsume" :duration="1000"
                      easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本月</p>
                </div>
                <div class="statistics-item">
                  <div class="val1">
                    <animate-number v-if="ConsumePrediction && ConsumePrediction.Contrast.WeekConsume" from="0"
                      :to="ConsumePrediction.Contrast.WeekConsume" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </div>
                  <p class="name1">本周</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox box1-2">
            <div class="ibox-header">
              <span class="ibox-title">能耗量监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="consume_chart2_3"></div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 2vh;">
        <el-col :span="12" class="ibox-group">
          <div class="ibox bgh  box4-1">
            <div class="ibox-header">
              <span class="ibox-title">月耗电统计</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="consume_chart3_1"></div>
            </div>
          </div>

        </el-col>
        <el-col :span="12" class="ibox-group">
          <div class="ibox bgh box4-1">
            <div class="ibox-header">
              <span class="ibox-title">动力环境系统监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="consume_chart3_2"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      pageConfig: {},
      ConsumePrediction: {
        Prediction: {},
        Contrast: {},
        Current: {},
      },
      consumerRgion: [],
      bottomChatConfig: {},
      middleChatConfig: {},
      area: "",
      unit: ""
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        setTimeout(this.initData, 200);
        this.timer = setInterval(this.initData,10000);
      }else{
        clearInterval(this.timer);
      }
    }
  },
  mounted() {
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getPageConfig() {
    },
    getConsumePredictionData() {
      this.ConsumePrediction = {
          Prediction: {},
          Contrast: {},
          Current: {},
        }
      this.https("get", "/api/Values/ReadData", { "classKey": "consumePrediction_config" }).then((res) => {
        const data = res.values;
        if (data) {
          this.ConsumePrediction = JSON.parse(data);
        } else {
          this.ConsumePrediction = {};
        }
      });
    },
    getRegionConsumeData() {
      this.consumerRgion = [];
      this.https("get", "/api/Values/ReadData", { "classKey": "consumerRgion_config" }).then((res) => {
        const data = res.values;
        if (data) {
          this.consumerRgion = JSON.parse(data);
        } else {
          this.consumerRgion = [];
        }
      });
    },
    getChatData2() {
      this.middleChatConfig = {};
      this.https("get", "/api/Values/ReadData", { "classKey": "consume_mid_config" }).then((res) => {
        const data = res.values;
        this.middleChatConfig = JSON.parse(data);
        this.area = this.middleChatConfig.楼栋.总面积;
        this.unit = this.middleChatConfig.楼栋.单位;
        let chartAxis = this.middleChatConfig.楼栋.楼栋名称;
        let seriesDatas = [{
          type: "bar",
          barWidth: this.func.chartSize(12),
          data: this.middleChatConfig.楼栋.楼栋面积,
          itemStyle: {
            borderRadius: [0, 100, 100, 0],
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: '#4E6AE9',
              },
              {
                offset: 1,
                color: '#02DDFE',
              }
            ]),
          },
          label: {
            show: true,
            position: "outside",
            verticalAlign: "middle",
            offset: [0, 0],
            color: "#fff",
            formatter: (params) => {
              return `${params.value || ''}`
            },
          },
        }];
        charts.hBlockChart("consume_chart2_1", chartAxis, seriesDatas);

        let chart22data = [];
        let colors = ["#FA5D58", "#FDD214", "#149BED", "#48D0E0", "#FA5D58", "#FDD214", "#FDD214", "#149BED", "#48D0E0", "#149BED", "#48D0E0"];
        this.middleChatConfig.水电气.map((item, index) => {
          let obj = {
            name: item.名称,
            value: item.数值,
            itemStyle: { color: colors[index] }
          };
          chart22data.push(obj)
        });

        let series = [{
          z: 10,
          name: '能源消耗',
          type: 'pie',
          radius: ['20%', '50%'],
          center: ['50%', '48%'],
          roseType: 'area',
          label: {
            formatter: (params) => {
              return `{val|${params.value}}\n{name|${params.name}}`
            },
            rich: {
              name: {
                fontSize: this.func.chartSize(12),
                lineHeight: this.func.chartSize(12),
                color: '#1C8FEA'
              },
              val: {
                fontSize: this.func.chartSize(14),
                lineHeight: this.func.chartSize(20),
                color: '#DDF2FF'
              }
            }
          },
          labelLayout: {
            align: "center",
          },
          labelLine: {
            // show: false,
            lineStyle: {
              width: 0.5,
              type: "dashed",
            }
          },
          data: chart22data
        },
        {
          name: '',
          type: 'pie',
          radius: ['59%', '60%'],
          center: ['50%', '48%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            chart22data,
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['0%', '60%'],
          center: ['50%', '48%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['74%', '75%'],
          center: ['50%', '48%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "#004EE6" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['75%', '80%'],
          center: ['50%', '48%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        }]
        let chart22Lenged = {
          orient: 'horizontal',
          top: 'bottom',
          left: 'center',
          bottom: 20,
          textStyle: {
            padding: [0, 0, 0, 0],
            lineHeight: 12,
            color: "#DDF2FF",
            fontSize: this.func.chartSize(12),
          }
        }
        charts.pieChart("consume_chart2_2", series, chart22Lenged);


        if (res.values) {
          this.middleChatConfig = JSON.parse(res.values);
        } else {
          this.middleChatConfig = {};
        }

        const chart23Data = this.middleChatConfig["能耗监测"] || [];
        let dataX23 = [], series23 = [
          {
            name: "完成数据",
            data: [],
          },
          {
            name: "总数据",
            data: [],
          },
        ];

        chart23Data[0].data.map((item, index) => {
          dataX23.push(index + 1 + "月");
          series23[0].data.push(item);
          series23[1].data.push(item);
        })
        charts.layerBlockChart("consume_chart2_3", dataX23, series23);
      });
    },
    getChatData3() {
      this.bottomChatConfig = {};
      this.https("get", "/api/Values/ReadData", { "classKey": "consumer_bottomchat_config" }).then((res) => {
        const data = res.values;
        if (data) {
          this.bottomChatConfig = JSON.parse(data);
        } else {
          this.bottomChatConfig = {};
        }
        let colors = ["#FA5D58", "#FDD214", "#149BED", "#48D0E0", "#FA5D58", "#FDD214", "#FDD214", "#149BED", "#48D0E0", "#149BED", "#48D0E0"];
        const chart31Series = this.bottomChatConfig["月耗电统计"] || [];
        let chart31Len = 12;
        if (chart31Series.length > 0) {
          chart31Len = chart31Series[0].data.length;
        }
        let chart31Axis = [];
        for (let i = 1; i <= chart31Len; i++) {
          // let nowDate = this.func.formatDate(new Date().getTime(), "yyyy-MM-dd");
          // chart32Axis.push(this.func.formatDate(this.func.getNextDays(nowDate, i - chart32Len), "yyyy/MM"));
          chart31Axis.push(i + "月");
        }
        chart31Series.map((item, index) => {
          let config = {
            type: "line",
            smooth: true,
            symbol: "none",
            labe: {
              show: false,
            },
            lineStyle: {
              width: this.func.chartSize(1.5),
              color: "#FDD214",
            },
            areaStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: colors[index],
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255,0)',
                }
              ])
            },
          }
          item = Object.assign(item, config);
        })
        charts.lineChart("consume_chart3_1", chart31Axis, chart31Series);

        const chart32Series = this.bottomChatConfig["动力环境监测"] || [];
        let chart32Len = 12;
        if (chart32Series.length > 0) {
          chart32Len = chart32Series[0].data.length;
        }
        let chart32Axis = [];
        for (let i = 1; i <= chart32Len; i++) {
          // let nowDate = this.func.formatDate(new Date().getTime(), "yyyy-MM-dd");
          // chart32Axis.push(this.func.formatDate(this.func.getNextDays(nowDate, i - chart32Len), "yyyy/MM"));
          chart32Axis.push(i + "月");
        }
        chart32Series.map((item, index) => {
          let config = {
            type: "line",
            smooth: true,
            symbol: "none",
            labe: {
              show: false,
            },
            lineStyle: {
              width: this.func.chartSize(1.5),
              color: colors[index],
            },
            areaStyle: {
              opacity: 0.5,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: colors[index],
                },
                {
                  offset: 1,
                  color: 'rgba(255, 255, 255,0)',
                }
              ])
            },
          }
          item = Object.assign(item, config);
        })
        charts.lineChart("consume_chart3_2", chart32Axis, chart32Series);
      });
    },
    initData() {
      this.getPageConfig();
      this.getConsumePredictionData();
      this.getRegionConsumeData();
      this.getChatData2();
      this.getChatData3();
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .box1-1 {
    height: 18vh;
  }

  .box1-2 {
    height: 40vh;
  }

  .box1-3 {
    height: 26vh;
  }

  .box2-1 {
    height: 0vh;
  }

  .box2-2 {
    height: 50vh;
  }

  .box2-3 {
    height: 28.5vh;
  }

  .box3-1 {
    height: 28.5vh;
  }

  .box3-2 {
    height: 28.5vh;
  }

  .box3-3 {
    height: 28.5vh;
  }

  .box4-1 {
    height: 27vh;
  }

  .val1 {
    font-size: 3vh;
    margin: 2.5vh auto 2vh;
    font-weight: bold;
    color: #73D9FF;
  }

  .name1 {
    font-size: 0.84vw
  }

  .list {
    overflow: hidden;
    zoom: 1;
    margin-top: 1vw;
  }

  .list li {
    float: left;
    width: 10.1vw;
    padding: 0.1vw;
    margin: 0.4vw;
  }
}
</style>